<!DOCTYPE html>
<html lang="zh-cmn-Hans" xmlns:th="http://www.thymeleaf.org">
<!--
Project Link: https://github.com/fly3949/fly.moe
-->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="HandheldFriendly" content="true">
    <title th:text="${configurations.get('websiteName')}"></title>
    <link rel="shortcut icon" th:href="@{${configurations.get('websiteIcon')}}"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/minireset.css@0.0.3/minireset.min.css" integrity="sha256-rYUTtzummUpBJLuuLnVN9Hy06M9uLlZ8W8VZOyiX2WQ="
          crossorigin="anonymous">
    <link th:href="@{/blog/amaze/about/main.css}" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js" integrity="sha256-9uAoNWHdszsUDhSXf/rVcWOqKPfi5/8V5R4UdbZle2A=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js" integrity="sha256-nwhzW/P9gnvWMPOm84MK8BzQRRMdi8iutxMuYsYcOgw=" crossorigin="anonymous"></script>
    <![endif]-->
</head>

<body>
<div id="background-small" th:style="'background-image:url(' + ${themeConfigurations.aboutBgImg} + ');'"></div>

<!-- Loading hover -->
<div class="loading">
    <div class="spinner">
        <div class="rect1"></div>
        <div class="rect2"></div>
        <div class="rect3"></div>
        <div class="rect4"></div>
        <div class="rect5"></div>
    </div>
</div>

<!-- Main box -->
<main>
    <div class="content">
        <div class="left">
            <div class="avatar">
                <img th:src="@{${configurations.get('yourAvatar')}}">
            </div>
            <ul class="menu">
                <li>
                    <a goto="#home">HOME</a>
                </li>
                <li>
                    <a goto="#archives">ARCHIVES</a>
                </li>
                <li>
                    <a goto="#contact">CONTACT</a>
                </li>
                <li>
                    <a goto="#donate">DONATE</a>
                </li>
            </ul>
            <div class="copyright">
                Made with
                <i class="fa fa-heart"></i> by
                <br>
                <a href="https://fly.moe" target="_blank">Fly3949</a>
            </div>
        </div>
        <div class="right">
            <section id="home" class="active">
                <h1 th:text="${configurations.get('yourName')}"></h1>
                <p th:utext="${themeConfigurations.get('aboutMeText')}">
                </p>
            </section>
            <section id="archives">
                <h1>近期文章</h1>
                <ul class="archive-list">
                    <th:block th:if="${null != newBlogs}">
                        <th:block th:each="newBlog : ${newBlogs}">
                            <li style="margin-top: 10px;"><a target="_blank" th:href="@{'/blog/' + ${newBlog.blogId}}">
                                <th:block th:text="${newBlog.blogTitle}"></th:block>
                            </a><span class="meta">/ [[${#dates.format(newBlog.createTime, 'yyyy-MM-dd')}]]</span></li>
                        </th:block>
                    </th:block>
                </ul>
            </section>
            <section id="contact">
                <h1>联系方式</h1>
                <div class="items">
                    <a href="/" target="_blank">
                        <i class="fa fa-home"></i>
                        <span>Blog</span>
                    </a>
                    <a href="https://weibo.com/p/1005055397883749" target="_blank">
                        <i class="fa fa-weibo"></i>
                        <span>Weibo</span>
                    </a>
                    <a href="https://space.bilibili.com/776678" target="_blank">
                        <i class="fa fa-video-camera"></i>
                        <span>Bilibili</span>
                    </a>
                    <a href="https://www.facebook.com/profile.php?id=100015858306770" target="_blank">
                        <i class="fa fa-facebook"></i>
                        <span>Facebook</span>
                    </a>
                    <a href="https://gitee.com/xuwangcheng" target="_blank">
                        <i class="fa fa-git"></i>
                        <span>Gitee</span>
                    </a>
                    <a th:href="'mailto:' + ${configurations.get('yourEmail')}" target="_blank">
                        <i class="fa fa-envelope"></i>
                        <span>E-Mail</span>
                    </a>
                </div>
            </section>
            <section id="donate">
                <h1>欢迎投喂，关注</h1>
                <div class="donate-img-box">
                    <img th:src="@{/blog/amaze/about/wechat.png}">
                    <img th:src="@{/blog/amaze/about/zfb.png}"><br>
                    <img th:src="@{/blog/amaze/images/gzh.png}">
                </div>
            </section>
        </div>
    </div>

    <footer>
        <p id="hitokoto">Loading...</p>
        <div class="copyright-mobile">
            Made with
            <i class="fa fa-heart"></i> by
            <a href="https://fly.moe" target="_blank">Fly3949</a>
        </div>
    </footer>
</main>

<script th:src="@{/blog/plugins/jquery/jquery.min.js}"></script>
<script th:src="@{/blog/amaze/about/main.js}"></script>
</body>
</html>